<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ page isELIgnored="false"%>

<html>
<head>
<title>Create Tourist Information</title>
<script type="text/javascript">
function submitform()
{
  document.thisform.submit();
}
</script> 

	<script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false&amp;key=ABQIAAAAZA3w8jEem5JlBtbgiylugRT2yXp_ZAY8_ufC3CFXhHIE1NvwkxRtd1TYFkicSI0Fz2ds_MoXhoumtQ" type="text/javascript"></script>
	<script type="text/javascript" src="js/mapsUtils.js"> </script>
	<link rel="stylesheet" type="text/css" href="css/cssForm.css">
</head>


<body onload="loadGeoPointMap(${param.lng}, ${param.lat})" onunload="GUnload()">



<h1 align="center">MOBILES</h1>

<div class="pageInstruction" >
	Adicione maiores informações sobre o ponto de carregamento.
</div>

<div id="contentLayer">

<table class="t1">
	<tr valign="top">
	
		<!-- Form column -->
		<td>
		<form action="/resources/touristPoint" method="POST" name="thisform" id="thisform">
		<div class="contentHolder">
			<div>				
				
				<table>
									
					<tr>
						<td class="formLabel">Nome:</td>
						<td>
							<input type="text" name="name" value="" id="name" size="45" >
						</td>
					</tr>
		
					<tr>
						<td class="formLabel">Endereço:</td>
						<td>
							<input type="text" name="address" value="${param.address}"	id="address"  size="45">
						</td>
					</tr>
					
					<tr>
						<td class="formLabel">País:</td>
						<td>
							<input type="text" name="country" value="${param.country}"	id="country"  size="45">
						</td>
					</tr>
					
					<tr>
						<td class="formLabel">Localidade:</td>
						<td>
							<input type="text" name="locality" value="${param.locality}"	id="locality"  size="45">
						</td>
					</tr>
															
					<tr>
						<td class="formLabel">Área administrativa:</td>
						<td>
							<input type="text" name="admArea" value="${param.admArea}"	id="admArea"  size="45">
						</td>
					</tr>
					
					<tr>
						<td class="formLabel">ZIP:</td>
						<td>
							<input type="text" name="zipCode" value="${param.zipCode}"	id="zipCode"  size="45">
						</td>
					</tr>
										
					<tr>
						<td class="formLabel">Geo Point:</td>
						<td>
							<input type="text" name="geoPoint" value="${param.lng}, ${param.lat}" id="geoPoint"  size="45">
						</td>
					</tr>
										
					<tr>
						<td class="formLabel">Web site:</td>
						<td>
							<input type="text" name="website" value="" size="33" id="website"> <br>
							<span class="tip">Exemplo: http://www.exemplo.com</span>
						</td>
					</tr>
					
					<tr>
						<!-- TODO: CARREGAR DINAMICAMENTE E PASSAR ID NO VALOR -->
						<td class="formLabel">Categoria:</td>
						<td>														
							<select name="category" style="font-size:80%;width:92%">
									<option value="http://google-maps-icons.googlecode.com/files/monastery.png" >&lrm;Church&lrm;</option>
									<option value="http://google-maps-icons.googlecode.com/files/fortress.png" >&lrm;Castel&lrm;</option>
									<option value="http://google-maps-icons.googlecode.com/files/palace.png" >&lrm;Palace&lrm;</option>
									<option value="http://google-maps-icons.googlecode.com/files/museum.png" >&lrm;Museum&lrm;</option>
							</select> 
						</td>
					</tr>												

					<tr>
						<!-- TODO: POSSIBILIDADE DE CARREGAR MAIS DE UM AUDIO. VIDE OBJ AudioInformation -->
						<td class="formLabel">Áudio da visita:</td>
						<td>
							<input type="text" name="audio" value="" size="33" id="audio">
						</td>
					</tr>		
		
					<tr>
						<td class="formLabel">Descrição:</td>
						<td>
							<textarea name="description" rows="3" cols="0" id="description"></textarea> <br>
							<span class="tip"> Máximo de 1000 caracteres caracteres.</span>
						</td>
					</tr>
				</table>
			</div>
		</div>
		</form>
				
		</td>

		<!-- Map column -->
		<td valign="top" class="preview"><!-- Div onde o mapa será renderizado -->
		<div id="mapContainer" style="widht: 200px; height: 350px"></div>
		</td>

	</tr>

	<!-- Botao submit para as informacoes do formulario -->
	<tr style="" id="wzButtonBarRow">
		<td colspan="2">		
			<div class="buttonHolder">
			<div class="btn" id="btn" onclick="submitform()">Cadastrar</div>
			</div>
		</td>
	</tr>
</table>
</div>

<br>

<div class="footer" align="center">page footer...</div>
</body>
</html>
